<template>
  <div class="pad">
    <div class="mask"></div>
    <div ref="showPad"></div>
  </div>
</template>

<script lang="ts">
import { ref, watch, onMounted, defineComponent } from 'vue'
import VditorPreview from 'vditor/dist/method.min'
import 'vditor/dist/index.css'
import { CDN } from '@/utils/netConf'

export default defineComponent({
  name: 'ShowProblem',
  props: {
    content: {
      type: String,
      required: false,
      default: '# 内容加载为空'
    }
  },
  setup (props: { content: string }) {
    const showPad = ref<HTMLElement | string>('')
    const renderPad = (txt: string) => {
      if (txt === '') {
        return
      }
      const options = {
        mode: 'light',
        cdn: CDN,
        theme: {
          path: CDN + '/dist/css/content-theme',
          current: 'light'
        }
      }
      VditorPreview.preview(showPad.value, txt, options)
    }
    watch(() => props.content, (txt) => renderPad(txt))
    onMounted(() => { renderPad(props.content) })
    return {
      showPad,
      renderPad
    }
  }
})
</script>

<style scoped>
.pad {
  user-select: none;
  padding: 0;
  position: relative;
}
.pad .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../assets/bg.svg");
}
</style>
